<template>
    <el-container class="sys_bug_work_sheet_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent">
                    <template slot="right_search">
                        <el-select v-model="searchForm.state" placeholder="请选择"
                                   class="w100" clearable @change="getList(true)"
                                   style="margin-right: 5px;">
                            <el-option v-for="(item, index) in stateList"
                                       :key="index" :label="item.label" :value="item.value" />
                        </el-select>
                    </template>
                </headerTemplate>
                <div class="card_content">
                    <vxeTableTemplate :data="dataList" :options.sync="tableOptions"
                                      @event="handleTableEvent" />
                </div>
            </el-card>
        </el-main>
        <component-dialog dialog-drag :options="componentDialogOptions" @event="handleDialogEvent" />
        <component-dialog dialog-drag :options="componentDialogDetailOptions" @event="handleDialogEvent" />
    </el-container>
</template>

<script>
import BugWorkSheetForm from "@common/views/system/bug-worksheet/BugWorkSheetForm";
import BugWorkSheetDetailForm from "@common/views/system/bug-worksheet/BugWorkSheetDetailForm";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "index",
    data() {
        let _this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: "refresh",
                        icon: "el-icon-refresh-right",
                        show: true,
                        method: () => {
                            _this.getList();
                        },
                    },
                    {
                        id: "add",
                        icon: "fa fa-plus",
                        type: "primary",
                        show: true,
                        // permission: "",
                        method: () => {
                            _this.openDialog(null, 'add');
                        },
                    },
                    {
                        id: "edit",
                        icon: "fa fa-pencil",
                        type: "success",
                        show: true,
                        // permission: "",
                        method: () => {
                            _this.openDialog(null, 'edit');
                        },
                    },
                    {
                        id: "delete",
                        icon: "fa fa-trash-o",
                        type: "danger",
                        show: true,
                        permission: "",
                        method: () => {
                            _this.deleteConfirm();
                        },
                    },
                    {
                        id: "handler",
                        // icon: "fa fa-plus",
                        label: "处理问题",
                        type: "primary",
                        show: true,
                        // permission: "",
                        method: () => {
                            _this.openDialog(null, 'handler');
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "code", label: "账套名称" },
                    { type: "daterange", field: "order_date", label: "创建日期", style: { width: '200px' }, },
                ],
            },
            searchForm: {},

            dataList: [],
            tableOptions: {
                ref: "SysBugWorkSheetTable",
                container: ".sys_bug_work_sheet_container",
                multiSelect: true,
                columns: [
                    {
                        label: "创建日期",
                        prop: "create_date",
                        align: "center",
                        minWidth: 160,
                    },
                    {
                        label: "账套名称",
                        prop: "account_name",
                        align: "center",
                        minWidth: 190,
                    },
                    {
                        label: "问题详情",
                        prop: "bug_info",
                        align: "center",
                        minWidth: 310,
                    },
                    {
                        label: "状态",
                        prop: "state",
                        align: "center",
                        minWidth: 100,
                        formatter: (row) => {
                            if (_this.$utils.isNotEmpty(row.state) && row.state === 0) {
                                return '待处理';
                            } else if (_this.$utils.isNotEmpty(row.state) && row.state === 1) {
                                return '处理中';
                            } else if (_this.$utils.isNotEmpty(row.state) && row.state === -1) {
                                return '客户关闭';
                            }
                            return '平台关闭';
                        },
                    },
                ],
                operates: {
                    fixed: "right",
                    list: [
                        {
                            id: "detail",
                            icon: "fa fa-info-circle",
                            type: "warning",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "详情",
                            },
                            method: (index, row) => {
                                _this.openDetailDialog(row, 'detail');
                            },
                        },
                        {
                            id: "edit",
                            icon: "fa fa-pencil",
                            type: "success ",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            filter(row) {
                                return row.state === 0 || row.state === 1;
                            },
                            method: (index, row) => {
                                _this.openDialog(row, 'edit');
                            },
                        },
                        {
                            id: "del",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "删除",
                            },
                            filter(row) {
                                return row.state === 0;
                            },
                            method: (index, row) => {
                                _this.deleteConfirm(row);
                            },
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1,
                },
            },
            selectionList: [],
            stateList: [
                {
                    value: 0,
                    label: '待处理',
                },
                {
                    value: 1,
                    label: '处理中',
                },
                {
                    value: -1,
                    label: '客户关闭',
                },
                {
                    value: 2,
                    label: '平台关闭',
                },
            ],
            componentDialogOptions: {
                visible: false,
            },
            componentDialogDetailOptions: {
                visible: false,
            },
        }
    },
    mounted() {
        this.getList(true);
    },
    methods: {
        //
        handleHeaderEvent(event) {
            const _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        //
        getList(query) {
            const _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            queryData.parent_sid = -1;
            _this.fetchData(_this.$api.API_FindSysBugWorksheets, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        //
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        //
        handleDialogEvent(event){

        },
        //
        deleteConfirm(row) {
            const _this = this;
            let sids = [];
            let msg = '是否删除该工单？';
            if (row) {
                if (row.state !== 0) {
                    _this.$message.error('处理中、关闭的数据不能删除！');
                    return;
                }
                sids.push(row.sid);
            } else {
                if (!_this.checkSelection(_this.selectionList, true)) {
                    return;
                }
                let filterList = _this.selectionList.filter(item => item.state !== 0);
                if (_this.$utils.isNotEmptyList(filterList)) {
                    _this.$message.error(`选择的记录存在处理中、关闭的数据不能删除！`);
                    return;
                }
                sids = _this.selectionList.map(item => item.sid);
                msg = '是否删除选择的工单';
            }
            _this.$confirm(msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                _this.deleteSysBugWorksheets(sids);
            }).catch(() => {
            });
        },
        deleteSysBugWorksheets(sids) {
            const _this = this;
            _this.fetchData(_this.$api.API_DeleteSysBugWorksheets, {sids: sids}).then(result => {
                _this.$message.success("删除成功！");
                _this.getList(true);
            }).catch(() => {
            });
        },
        //
        openDialog(row, type) {
            const _this = this;
            if ((type === 'edit' || type === 'handler') && row == null) {
                if (!_this.checkSelection(_this.selectionList, false)) {
                    return;
                }
                row = _this.selectionList[0];
            }
            _this.componentDialogOptions = {
                visible: true,
                title: type === 'detail' ? '系统问题工单处理详情': '系统问题工单',
                width: '920px',
                component: BugWorkSheetForm,
                propsData: {
                    type,
                    row: row,
                },
                btns: type === 'detail' ? [] : [
                    {
                        type: 'primary',
                        text: '确定',
                        loading: true,
                        method(option, { component }) {
                            component && typeof component.handleSaveBugWorkSheet === 'function'
                            && component.handleSaveBugWorkSheet().then(valid => {
                                if (valid) {
                                    option.visible = false;
                                    _this.getList(true);
                                }
                            });
                        },
                    },
                ],
            };
        },
        //
        openDetailDialog(row) {
            const _this = this;
            _this.componentDialogDetailOptions = {
                visible: true,
                title: '系统问题工单处理记录',
                width: '1000px',
                component: BugWorkSheetDetailForm,
                propsData: {
                    row,
                    detail: (res) => {
                        _this.openDialog(res, 'detail')
                    }
                },
                btns: [

                ],
            };
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.sys_bug_work_sheet_container {

}
</style>
